<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { GetAccountData, GetShopData } from '@/api/modules/statisticis.ts'
import { GetStopOption } from '@/api/modules/shop.ts'

const inquireFrom = reactive({
  RecShopid: '',
  RoleId: '~',
  UserId: '',
  Time: [],
})
const dataList: any = reactive({
  shop: [],
  AccountList: [],
})
// 加载
const loading = ref(false)
const total = ref(0) // 总数据数
let PageSize = 20 // 每页条数

const route = useRoute()
const id = route.query.id as string

const OptionList = reactive({
  Shop: [],
  Role: [
    { value: '~', label: '全部' },
    { value: '1', label: '店长' },
    { value: '2', label: '店员' },
  ],
})

// 获取数据
function GetDataList(PageIndex: number = 1, PageSize: number = 20) {
  loading.value = true
  interface Params {
    PageIndex?: number
    PageSize?: number
    RecShopid?: number | string
    AddTimeStart?: string
    AddTimeEnd?: string
  }
  const params: Params = {
    PageIndex,
    PageSize,
    ...(inquireFrom.RecShopid && { RecShopid: inquireFrom.RecShopid }),
    ...(inquireFrom.Time?.length > 0 && {
      AddTimeStart: inquireFrom.Time[0],
      AddTimeEnd: inquireFrom.Time[1],
    }),
  }
  const paramsStr = { ...params }
  delete paramsStr.PageIndex
  delete paramsStr.PageSize
  GetShopData(paramsStr).then((res: any) => {
    if (res.succeeded) {
      dataList.shop[0] = { ...res.data }
    }
    else {
      ElMessage.error(`查询失败。${res.errors}`)
      loading.value = false
    }
  })
  GetAccountData(params).then((res: any) => {
    if (res.succeeded) {
      dataList.AccountList = res.data.items
      total.value = res.data.total
      loading.value = false
    }
    else {
      ElMessage.error(`查询失败。${res.errors}`)
      loading.value = false
    }
  })
}

// 查询
function Inquire() {
  GetDataList(1, PageSize)
}

// 页码
function handleSizeChange(val: number) {
  GetDataList(1, val)
  PageSize = val
}
function handleCurrentChange(val: number) {
  GetDataList(val, PageSize)
}

watch(inquireFrom, (newValue) => {
  if (!id) {
    if (newValue.RecShopid) {
      GetDataList(1, PageSize)
    }
  }
}, { deep: true })

onMounted(() => {
  if (id) {
    inquireFrom.RecShopid = id
    GetDataList()
  }
  GetStopOption().then((res: any) => {
    if (res.succeeded) {
      OptionList.Shop = res.data
    }
    else {
      ElMessage.error(`获取店铺失败。${res.errors}`)
    }
  })
})
</script>

<template>
  <PageMain>
    <SearchBar :show-toggle="false">
      <div class="header">
        <el-form>
          <div class="from">
            <el-form-item label="店铺">
              <el-select v-model="inquireFrom.RecShopid" placeholder="请选择店铺" :disabled="id !== undefined">
                <el-option
                  v-for="(item, index) in (OptionList.Shop as any)"
                  :key="index"
                  :label="`${item.id}-${item.shopName}`"
                  :value="`${item.id}`"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="角色">
              <el-select v-model="inquireFrom.RoleId" placeholder="请选择角色">
                <el-option v-for="(item, index) in OptionList.Role" :key="index" :label="`${item.label}`" :value="`${item.value}`" />
              </el-select>
            </el-form-item>
            <el-form-item label="用户ID">
              <el-input v-model="inquireFrom.UserId" placeholder="请输入用户ID" clearable @keyup.enter="Inquire" />
            </el-form-item>
            <el-form-item label="下单时间">
              <el-date-picker
                v-model="inquireFrom.Time" type="datetimerange" clearable value-format="YYYY-MM-DD HH:mm:ss"
                range-separator="到" start-placeholder="开始日期" end-placeholder="结束日期"
                @keyup.enter="Inquire"
              />
            </el-form-item>
          </div>
        </el-form>
        <div class="text-right">
          <el-button @click="Inquire">
            查询
          </el-button>
        </div>
      </div>
    </SearchBar>
    <ElDivider border-style="dashed" />
    <!-- <div class="mb-5 text-right">
      <el-button @click="Open">

      </el-button>
    </div> -->
    <el-descriptions title="店铺业绩统计" border>
      <el-descriptions-item label="总业绩">
        {{ dataList.shop[0]?.totalPerformance }}
      </el-descriptions-item>
      <el-descriptions-item label="总盈利">
        {{ dataList.shop[0]?.totalFenRun }}
      </el-descriptions-item>
      <el-descriptions-item label="店长总业绩">
        {{ dataList.shop[0]?.managerTotalPerformance }}
      </el-descriptions-item>
      <el-descriptions-item label="店长总盈利">
        {{ dataList.shop[0]?.managerTotalFenRun }}
      </el-descriptions-item>
      <el-descriptions-item label="员工总业绩">
        {{ dataList.shop[0]?.staffTotalPerformance }}
      </el-descriptions-item>
      <el-descriptions-item label="员工总盈利">
        {{ dataList.shop[0]?.staffTotalFenRun }}
      </el-descriptions-item>
    </el-descriptions>
    <div style="height: 10px;" />
    <el-table v-loading="loading" :data="dataList.AccountList" stripe style="width: 100%;" border>
      <el-table-column align="center" prop="subscriber.userId" label="用户ID" width="100" />
      <el-table-column align="center" prop="subscriber" label="用户信息" width="200">
        <template #default="scope">
          <div v-if="scope.row.subscriber?.userId === 0">
            未授权
          </div>
          <div v-else class="user-name">
            <el-avatar :size="40" style="margin-right: 10px;" :src="scope.row.subscriber?.userAvatar" />
            <div>
              <p style="margin: 0;">
                {{ scope.row.subscriber?.userNickName }}
              </p>
              <span>
                {{ scope.row.subscriber?.userPhone }}
              </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column header-align="center" prop="subscriber.unionid" label="Unionid" width="300" />
      <el-table-column header-align="center" prop="subscriber.scOpenId" label="OpenId" width="300" />
      <el-table-column align="center" prop="roleId" label="角色" width="150">
        <template #default="scope">
          {{ scope.row.roleId === 1 ? '店员' : scope.row.roleId === 2 ? '店长' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="realName" label="姓名" width="150" />
      <el-table-column align="center" prop="userStatus" label="账户状态" width="150">
        <template #default="scope">
          {{ scope.row.userStatus === 1 ? '启用' : scope.row.userStatus === 2 ? '冻结' : '未知' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="percents" label="分润百分比" width="150" />
      <el-table-column align="center" prop="bindTime" label="绑定身份时间" width="200" />
      <el-table-column align="center" prop="totalPerformance" label="总业绩" width="200" />
      <el-table-column align="center" prop="totalFenRun" label="总盈利" width="200" />
    </el-table>
    <div style="height: 10px;" />
    <el-pagination
      :default-page-size="20"
      :page-sizes="[5, 10, 20, 50, 100]"
      layout="total, sizes, ->, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </PageMain>
</template>

<style scoped>
.header {
  display: grid;
  grid-template-columns: 6fr 1fr;
  grid-gap: 20px;

  .from {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;

    .el-form-item {
      margin-bottom: 0;
    }
  }
}

.user-name {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-right: 25px;

  div {
    text-align: left;
  }
}

.tag-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;

  span {
    margin-right: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 400;
  }
}
</style>
